<template>
  <div class="game-sections">
    <!-- 热门游戏榜 -->
    <div class="game-section">
      <div class="section-header">
        <h2>热门游戏榜</h2>
        <a href="#" class="view-more">查看更多 ></a>
      </div>
      <div class="cards-row">
        <div class="game-card" v-for="(game, index) in hotGames" :key="'hot-'+index">
          <div class="game-info">
            <h3 class="game-title">{{ game.name }}</h3>
            <div class="game-meta">
              <span class="rating">{{ game.rating }}</span>
              <span class="tags">{{ game.tags }}</span>
            </div>
            <p class="game-notice" v-if="game.notice">{{ game.notice }}</p>
          </div>
          <button class="download-btn">下载</button>
        </div>
      </div>
    </div>

    <!-- PC端游榜 -->
    <div class="game-section">
      <div class="section-header">
        <h2>PC端游榜</h2>
        <a href="#" class="view-more">查看更多 ></a>
      </div>
      <div class="cards-row">
        <div class="game-card" v-for="(game, index) in pcGames" :key="'pc-'+index">
          <div class="game-info">
            <h3 class="game-title">{{ game.name }}</h3>
            <div class="game-meta" v-if="game.rating">
              <span class="rating">{{ game.rating }}</span>
              <span class="tags">{{ game.tags }}</span>
            </div>
          </div>
          <button class="download-btn">下载</button>
        </div>
      </div>
    </div>

    <!-- 游戏预约榜 -->
    <div class="game-section">
      <div class="section-header">
        <h2>游戏预约榜</h2>
        <a href="#" class="view-more">查看更多 ></a>
      </div>
      <div class="cards-row">
        <div class="game-card" v-for="(game, index) in preorderGames" :key="'pre-'+index">
          <div class="game-info">
            <h3 class="game-title">{{ game.name }}</h3>
            <div class="game-meta" v-if="game.rating">
              <span class="rating">{{ game.rating }}</span>
              <span class="tags">{{ game.tags }}</span>
            </div>
          </div>
          <button class="download-btn">{{ game.buttonText || '下载' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const hotGames = [
  { name: '银与绯', rating: '★7.5', tags: '角色扮演：剧情·暗黑', notice: '官D同服 公卿开启！番剧驱动...' },
  { name: '原神', rating: '★6.4', tags: '角色扮演：二次元·冒险' },
  { name: '明日方舟', rating: '★7.5', tags: '领略：架空文明·未世' }
]

const pcGames = [
  { name: '原神（PC版）', rating: '★5.8', tags: '角色扮演：幻想·二次元' },
  { name: '鸣溺（PC版）', rating: '★6.2', tags: '角色扮演：二次元·开放...' },
  { name: '崩坏：星穹铁道（PC版）', rating: '★8.6', tags: '角色扮演：冒险' }
]

const preorderGames = [
  { name: '异环', rating: '★9.4', tags: '角色扮演：开放世界·超...' },
  { name: '异人之下', rating: '★9.3', tags: '动作：3D·搜放' },
  { name: '星辰共鸣', rating: '★8.3', tags: '角色扮演：PC·蔚蓝法则' }
]
</script>

<style scoped lang="scss">
.game-sections {
  width: 100%;
  margin: 0 auto;
  padding: 20px;

  .game-section {
    margin-bottom: 40px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      h2 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }

      .view-more {
        font-size: 14px;
        color: #666;
        text-decoration: none;

        &:hover {
          color: #ff6600;
        }
      }
    }

    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;

      .game-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .game-info {
          flex: 1;

          .game-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 8px 0;
          }

          .game-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 12px;

            .rating {
              color: #ff6600;
              font-weight: bold;
            }

            .tags {
              color: #888;
            }
          }

          .game-notice {
            font-size: 12px;
            color: #ff6600;
            margin: 8px 0 0 0;
          }
        }

        .download-btn {
          align-self: flex-start;
          background: #ff6600;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 6px 16px;
          font-size: 12px;
          cursor: pointer;
          margin-top: 12px;

          &:hover {
            background: #ff8533;
          }
        }
      }
    }
  }
}
</style>
